<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>前端开发爱好者</title>
  </head>
  <style>
    .cssContent {
      width: 500px;
      min-height: 100px;
      height: auto;
      border: 1px solid #1e80ff;
      -webkit-user-modify: read-write;
      /* -webkit-user-modify: read-only; */
      outline: none;
      caret-color: #1e80ff;
      text-indent: 20px;
    }

    .topic_theme {
      color: #1e80ff;
    }
  </style>

  <body>
    <div id="cssContent" class="cssContent" dropzone="copy" spellcheck="false" tabindex="-1">
      <p class="topic_theme">前端开发爱好者</p>
    </div>

    <script>
      const divFa = document.getElementById('cssContent');
      divFa.addEventListener('keyup', (e) => {
        console.log('键盘keyup事件', e.target.outerText);
      });
      // 实现数字千分位分隔
      let num = '12345678';
      let reg = /(?=\B(\d{3})+$)/g;
      // console.log(num.replace(reg, ',')); //12,345,678
      // Number.prototype.toLocaleString()
      // function fn(num, sep, size) {
      //   num += "";
      //   let numArr = num.split("").reverse();
      //   let group = parseInt(numArr.length / size);
      //   let resArr = []
      //   // 设置一个变量来控制数组分割的起始和终止
      //   let i = 0;
      //   while (group) {
      //     // 确定分隔符的位置
      //     resArr = [...resArr, ...numArr.slice(size * i, size * (i + 1)), sep]
      //     group--;
      //     i++;
      //   }
      //   // 表示参与分割的数组元素个数
      //   const restIndex = resArr.length - parseInt(numArr.length / size);

      //   // 将没参与分组的元素添加到已经添加分隔符的数组中
      //   resArr = [...resArr, ...numArr.slice(restIndex)]
      //   // 将分隔好的数组反转，并转为字符串。
      //   let strNum = resArr.reverse().join('')
      //   if (strNum[0] === sep) {
      //     strNum = strNum.slice(1)
      //   }
      //   return strNum;
      // }
      // console.log(fn(12345678, ',', 3)) //12,345,678

      const obj = {
        data: {
          list: [11, 99, 33],
        },
      };

      // function resolveObjectPath(path, target) {
      //   const tempArray = path.split('.');
      //   let i = 0,
      //     len = tempArray?.length ?? 0;
      //   while (i < len) {
      //     target = target[tempArray[i]];
      //     i++;
      //   }
      //   return target;
      // }
      // const ret = resolveObjectPath('data.list', obj);
      // console.log('===ret===>', ret)

      const currentList = [
        { id: 3573873287273, name: '55', isUser: true },
        { id: 25343, name: '66', isUser: false },
        { id: 357273, name: '33', isUser: true },
        { id: 44, name: '44', isUser: false },
      ];

      const referenceList = [
        { id: 111651651, name: '11', isUser: true },
        { id: 2, name: '22', isUser: false },
        { id: 356156, name: '33', isUser: true },
        { id: 44, name: '44', isUser: false },
      ];

      // 构建 referenceList 的 Map 提升查找性能
      const refMap = new Map(referenceList.map((item) => [item.id, item]));

      const deleteIndexs = [];

      for (let i = 0; i < currentList.length; i++) {
        const item = currentList[i];
        const matchInRef = refMap.get(item.id);

        if (!matchInRef) continue;

        // 如果当前项不是用户，则标记当前索引
        if (!item.isUser) {
          deleteIndexs.push(i);
        }

        // 如果前一项是用户，则也标记前一项索引
        if (i - 1 >= 0 && currentList[i - 1].isUser) {
          deleteIndexs.push(i - 1);
        }
      }

      // 过滤出不需要删除的项
      const filteredList = currentList.filter((_, index) => !deleteIndexs.includes(index));

      console.log('===list==>', filteredList);
    </script>
  </body>
</html>
